<template>
	<view class="answer">
		<view class="title">
			<view>
				<text>{{form.name}}</text>
				<text>总分：{{form.score}}</text>
			</view>
			<view>
				<text>时长： {{form.suggestTime}}分钟</text>
				<text>倒计时：{{remainTime}}</text>
			</view>
		</view>
		<!-- 节点 -->
		<node :answerItem="answer.answerItems" @goArc="goArc" :currentItemOrder="currentItemOrder"></node>
		<!-- 题目 -->
		<scroll-view class="subjects" :show-scrollbar="false" scroll-y="true">
			<uni-forms ref="form" :model="form">
				<!--题目标题-->
				<uni-forms-item label="" name="">
					<subject @preAndNext="goArc" :currentTitleItem="currentTitleItem" :currentQuestionItem="currentQuestionItem"
					:answer="answer.answerItems[currentItemOrder]"></subject>
				</uni-forms-item>
			</uni-forms>
		</scroll-view>
		<button class="btn"  @click="submitForm">提交试卷</button>
	</view>
</template>

<script>
	import { mapState , mapGetters} from 'vuex'
	import node from "@/components/node/node.vue"
	import subject from "@/components/subject/subject.vue"
	export default {
		data() {
			return {
				subjectType: 4,
				form: {}, //提交表单
				answer: {  //题目答案
					questionId: null,
					doTime: 0,
					answerItems: []
				},
				timer: null,  //计时器
				remainTime: 0,
				currentQuestionItem: {},
				currentQuestionIndex: 0,
				currentTitleItem: {},
				currentTitleIndex:  0,
				currentItemOrder: 0,
				isSubmit:false,
				flag: true //退出标准
			}
		},
		onInit(){
			//清除定时器
			setInterval(this.timer);
		},
		onLoad(options){
			//获取token
			let token = uni.getStorageSync("token");
			console.log(!token);
			if( !token){
				// uni.showToast({
				// 	title: "请先登录！！"
				// })
				uni.redirectTo ({
					url: "/pages/login/login"
				});
			}
			// console.log(options.paperId);
			//1.获取试卷Id
			let id = options.paperId; 
			if( id && id != 0){
				this.getExamPaperById(id);
			}
		},
		onBackPress(){
			if (this.flag) {  
				uni.showModal({  
					title: "温馨提示",  
					content: "是否确定退出并提交试卷？",  
					success: (res) => {  
						if (res.confirm) {   
							this.flag = false  
							this.answerSub();
						
							return true  
						} else {  
							this.flag = true  
							uni.showToast({
								title:"请继续答题！！"
							})  
							return true  
						}  
					}  
				})  
				return true  
			}else{  
				return false  
			}  
		},
		methods: {
			//标题选择下一题
			goArc(selector){
				
				if(selector >= this.answer.answerItems.length){
					uni.showToast({
						title: "这是最后一题了"
					})
					return false;
				}
				
				//保存答案使用
				this.currentItemOrder = selector;
				
				let titleItemArray = this.form.titleItems;
				for( let tIndex in titleItemArray){
					let questionArray = titleItemArray[tIndex].questionItems;
					for(let qIndex in questionArray){
						let question = questionArray[qIndex]
						if(question.itemOrder ==  selector){
							this.currentQuestionItem=question;
							this.currentTitleItem = titleItemArray[tIndex];
							return;
						}
					}
				}
				
			},
			//格式化剩余时间
			formatSeconds(theTime){
				return formatSeconds(theTime);
			},
			async getExamPaperById(id){
				const resp = await this.$myRequest({
					url: "/api/student/exam/paper/select/"+id
				});
				if(resp.data.code == 200){
					this.form = resp.data.obj;
					//考试剩余时间
					this.remainTime = resp.data.obj.suggestTime * 60;
					//初始化题目
					this.initAnswer();
					//初始化定时任务
					this.timeReduce();
					
					//当前显示题目
					this.currentTitleItem = this.form.titleItems[0];
					this.currentQuestionItem = this.currentTitleItem.questionItems[0];
				}
				
			},
			//初始化题目
			initAnswer(){
				//1、保存试卷id
				this.answer.id = this.form.id;
				let titleItemArray = this.form.titleItems;
				for( let tIndex in titleItemArray){
					let questionArray = titleItemArray[tIndex].questionItems;
					for(let qIndex in questionArray){
						let question = questionArray[qIndex]
						this.answer.answerItems.push({
							questionId : question.id,
							content: null,
							contentArray: [], 
							completed: false,
							itemOrder: question.itemOrder
						})
					}
				}
			},
			//计时
			timeReduce(){
				this.timer = setInterval( () => {
					if( this.remainTime <= 0){
						this.submitForm();
					}else{
						++this.answer.doTime;
						--this.remainTime;
					}
				},1000);
			},
			//试卷提交
			submitForm(){
				if( this.remainTime <= 0){
					this.answerSub(); //提交
				}else{
					uni.showModal({
					  title: '提示信息',
					  content: '是否提交试卷？',
					  cancelText: "取消",
					  confirmText: "确认",
					  confirmColor: '#F2C827',
					  cancelColor: '#9E9E9E',
					  success:  (res) => {
						if (res.confirm) {
						  this.answerSub(); //提交
						} else if (res.cancel) {
						  uni.showToast({
						  	title:"请继续答题！！"
						  })
						}
					  }
					});
				}
				
			},
			//真正提交试卷
			async answerSub(){
				//清除定时器
				clearInterval(this.timer);
				const resp = await this.$myRequest({
					url: "/api/student/exampaper/answer/answerSubmit",
					method: "POST",
					data: this.answer
				});
				if( resp.data.code == 200){
					let content = "试卷得分：" + resp.data.obj + '分';
					uni.showModal({
					  title: '考试结果',
					  content: content,
					  confirmText: "返回考试记录",
					  confirmColor: '#F2C827',
					  showCancel:false,
					  success:  (res) => {
						if (res.confirm) {
						  uni.redirectTo({
						  	url: "/pages/test-history/test-history"
						  })
						} 
					  }
					});
				}else{
					uni.showToast({
						title : resp.data.message
					})
				}
				
			}
		},
		computed: {
			...mapGetters('enumItem', ['enumFormat']),
			...mapState('enumItem',{
				doCompletedTag: state => state.exam.question.answer.doCompletedTag
			})
		}
	}
</script>

<style lang="scss">
	
.answer{
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	width:100%;
	box-sizing: border-box;
	margin-bottom: 20rpx;
	padding-top: 25rpx;
	padding-bottom: 94rpx;
	.title{
		width: 92%;
		view{
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			color:#212121;
			margin-top: 10rpx;
		}
	}
	.subjects{
		width: 92%;
		height: 740rpx;
		border-radius: 20rpx;
		background: #fff;
		margin-top: 40rpx;
		box-sizing: border-box;
		border: 2rpx solid var(--themeColor);
		// padding: 0 20rpx;
		position: relative;
		
	}
	.btn{
		// margin-top: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 92rpx;
		color:#fff;
		background-color: var(--themeColor);
		font-size: 28rpx;
		border-radius: 20rpx 20rpx 0 0;
		padding: 10rpx 0;
		position: fixed;
		bottom: 0;
		left: 0;
		
	}
}
</style>
